window.addEventListener("load", function () {
	var phoneData = {
		sidebar: [
			{
				img: "./img/mix-fold.jpg",
			},
		],
		rightSide: [
			{
				img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0d4b362431de4bdda03315ffdbc7b32a.jpg",
				title: "Xiaomi 11 青春活力版-0",
				desc: "轻薄5G，内外皆出彩-0",
				price: "1990元起",
			},
			{
				img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6d0a3e7acc3e91e2cfd83dbbe1d1c029.jpg",
				title: "Xiaomi 11 青春活力版-1",
				desc: "轻薄5G，内外皆出彩-1",
				price: "1991元起",
			},
			{
				img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/50da95e9e4496dcac8704da2deb94f6e.jpg",
				title: "Xiaomi 11 青春活力版-2",
				desc: "轻薄5G，内外皆出彩-2",
				price: "1992元起",
			},
			{
				img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c001ebc4aee69bc9ff6fae9ecf9137d0.jpg",
				title: "Xiaomi 11 青春活力版-3",
				desc: "轻薄5G，内外皆出彩-3",
				price: "1993元起",
			},
			{
				img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3490cfc52dc7c9abf9badfa1dc2d0eae.png",
				title: "Xiaomi 11 青春活力版-4",
				desc: "轻薄5G，内外皆出彩-4",
				price: "1994元起",
			},
			{
				img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7290b681343512c60e3a845379f3335f.jpg",
				title: "Xiaomi 11 青春活力版-5",
				desc: "轻薄5G，内外皆出彩-5",
				price: "1995元起",
			},
			{
				img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c5c752522100ecd364cc53752bb660bc.jpg",
				title: "Xiaomi 11 青春活力版-6",
				desc: "轻薄5G，内外皆出彩-6",
				price: "1996元起",
			},
			{
				img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab07e0fcbec3beb8b0f409db8bee8da4.jpg",
				title: "Xiaomi 11 青春活力版-7",
				desc: "轻薄5G，内外皆出彩-7",
				price: "1997元起",
			},
		],
	};
	// 寻找dom元素
	var phoneArea = this.document.querySelector("div.phone-area");
	// 拼接数据
	var htmlString = "";
	// 拼接侧边栏
	for (var i = 0; i < phoneData.sidebar.length; i++) {
		var sidebarObj = phoneData.sidebar[i];
		htmlString += `<div class="sidebar move">`;
		htmlString += `<a href="javascript:;"><img src="${sidebarObj.img}" alt=""></a>`;
		htmlString += `</div>`;
	}
	// 拼接右侧的商品
	htmlString += `<div class="right-side right-side-show">`;
	for (var i = 0; i < phoneData.rightSide.length; i++) {
		var rightSideObj = phoneData.rightSide[i];
		htmlString += `<div class="mid move">`;
		htmlString += `<a href="javascript:;">`;
		htmlString += `<img src="${rightSideObj.img}" alt="">`;
		htmlString += `<h3>${rightSideObj.title}</h3>`;
		htmlString += `<p>${rightSideObj.desc}</p>`;
		htmlString += `<p>${rightSideObj.price}</p>`;
		htmlString += `</a>`;
		htmlString += `</div>`;
	}
	htmlString += `</div>`;
	// 展示数据
	phoneArea.innerHTML = htmlString;
});
